<!--
 * @Author: Bennty
 * @Date: 2024-08-12 15:27:48
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-20 17:47:14
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="编辑生产工序" @close="handleClose" width="25%">
        <el-form :model="processData" ref="processFormRef">
            <el-form-item label="新建生产工序" prop="newProcess">
                <el-row :gutter="15">
                    <el-col :span="20">
                        <el-input v-model="processData.newProcess" placeholder="请输入"/>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" :disabled="!processData.newProcess" @click="handleAddNewProcess">添加</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="选择展示工序" prop="displayProcess">
                <el-row :gutter="5">
                    <el-col :span="20">
                        <el-select v-model="processData.displayProcess" multiple >
                            <el-option v-for="item in props.processes" :label="item.processName" :value="item.id" :key="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" :disabled="!processData.displayProcess.length" @click="handleDisplayedChange">添加</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="目前已存在工序">
                <el-row class="exist-processes" :gutter="10">
                    <el-col v-for="(item,index) in processData.existedProcess" :key="item?.id" :span="6">
                        <el-tag class="existed-process"   type="success" size="large" effect="dark" closable @close="handleCloseProcess(index)">{{ item.processName }}</el-tag>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
const props = defineProps(['visible','processes']);
const emits = defineEmits(['close','addProcess']);
const processFormRef = ref<FormInstance>();
interface processDataType{
    newProcess?: string;
    displayProcess: {
        id: string|number;
        processName: string;
    }[];
    existedProcess:{
        id: string|number;
        processName: string;
    }[]
}
const processData = ref<processDataType>(
    {
        newProcess: undefined,
        displayProcess: [],
        existedProcess: []
    }
);
const processOptions = ref([]);

watch(()=>props.processes,()=>{
    processOptions.value = props.processes;
});

const handleAddNewProcess = ()=>{
    const latestProcessId = props.processes[props.processes.length-1].id;
    let newProcessId = latestProcessId + 1;
    const newProcess = {
        id: newProcessId,
        processName: processData.value.newProcess
    };
    emits('addProcess', newProcess);
    processData.value.newProcess = undefined;
};

const handleDisplayedChange = ()=>{
    // console.log(processData.value.displayProcess);
    const selectedProcess = processData.value.displayProcess.map((item)=>{
        for(let process of props.processes){
            if(process.id == item){
                return process
            }
        };
    });
    //@ts-ignore
    processData.value.existedProcess = [...selectedProcess];
};

/** 删掉已存在的步骤 */
const handleCloseProcess = (index:number)=>{
    processData.value.existedProcess.splice(index,1);
    const displayedProcess = processData.value.existedProcess.map((item)=>item.id);
    //@ts-ignore
    processData.value.displayProcess = [...displayedProcess];
};

const handleClose = ()=>{
    emits('close');
    processFormRef.value?.resetFields();
    processData.value.existedProcess = [];
};
</script>

<style lang="scss" scoped>
// .existed-process:not(:first-child){
//     margin-left: 10px;
// }

.exist-processes{
    width: 100%;
    .existed-process{
        width: 100%;
        margin-top: 5px;
    }
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>